<template>
<div class="totalStyle" >
    <div class="tablestyle">
      <div class="titleStyle">
        <p class="leftTitle font_w">操作日志</p>
      </div>
      <div class="bottomBox">
        <div class="searchsize">
            <el-col  class="searchBox">
              <el-input
                              class="w-10 m-2 mr-8 float-left"
                              v-model="modelData.searchValue.contractSearch"
                              placeholder="请输入操作人/操作模块"
                              clearable
                              maxlength="50"
                          />
                <el-date-picker
                  class="w-10 m-2 mr-8 float-left"
                  v-model="modelData.searchValue.timeframe"
                  type="daterange"
                  start-placeholder="操作开始日期"
                  end-placeholder="操作结束日期"
                  :default-time="defaultTime"
              />
                <el-button type="info" plain @click="reset"
                            >重置</el-button> 
              <el-button type="primary" plain class="searchbutton " @click="queryTableData" >查询</el-button>
            </el-col>
        </div>
        <div class="chartstyle">
          <el-table
            :data="modelData.table.tableData"
            :header-cell-style="{ background: '#F2F5FA' }"     
            border
            style="width: 100%"
          > 
            <el-table-column prop="requestTime" label="操作时间" min-width="10%" />
            <el-table-column prop="realName" label="操作人" min-width="10%" />
            <el-table-column prop="requestModule" label="操作模块" min-width="10%" />
            <el-table-column prop="requestDesc" label="操作内容" min-width="10%" />
            <template #empty>
                <el-empty v-loading="modelData.table.tableLoading"></el-empty>
            </template>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination
              :pageIndex="modelData.table.pageIndex"
              :page-size="modelData.table.pageSize"
              :page-sizes="[5, 10, 15, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="modelData.table.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
</div>

</template>
<script setup>
// import Dialog from "./dialog.vue";
// import Detail from "./detail.vue";
import { onBeforeMount, watch, getCurrentInstance } from "vue";
import { reactive, ref, markRaw } from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import store from '@/store'
import { getymd } from "@/utils/auth";
import { getLogs as getLogs} from '@/api/index.js'
import { useRouter } from 'vue-router';
const router = useRouter();
let modelData =  reactive({
    searchValue:{
      contractSearch:'',//操作部门
      startTime:'',
      endTime:'',
      timeframe:''
    },
    dropdown:{
      category:[{
                      label: '阳光采购',
                      value: '0'
                    },{
                      label: '自采合同',
                      value: 1
                    },{
                      label: '询价合同',
                      value: '2'
                    }],
      contractType:[{
                      label: '服务类',
                      value: 0
                    },{
                      label: '设备类',
                      value: 1
                    },{
                      label: '耗材类',
                      value: 2
                    },{
                      label: '劳务类',
                      value: 3
                    },{
                      label: '协议类',
                      value: 4
                    }],
        componylist:[{}]       
      },
    table:{
        tableLoading: false,
        pageIndex: 1,
        pageSize: 10,
        total:0,
        tableData: [],
    },
    detail:{
        showDetail:false,
        dialogTableValue:{}, //查看数据,
        tableId:''
    },
    dialog:{
      title:'编辑',
      dialogTableValue:{},
      dialogFormVisible:false,
      
    }
})

const queryTableData = () => {
  modelData.table.tableLoading = true;
  let obj = {
    contractSearch:modelData.searchValue.contractSearch,
    startTime:modelData.searchValue.timeframe?getymd(modelData.searchValue.timeframe[0]):'',
    endTime:modelData.searchValue.timeframe?getymd(modelData.searchValue.timeframe[1]):'',
    pageIndex:modelData.table.pageIndex,
    pageSize:modelData.table.pageSize
  }
  getLogs(obj)
    .then((res)=>{
      modelData.table.tableLoading = false;
      if(res.code === 200){
        //console.log(res)
          let data = res.body;
          modelData.table.tableData=data&&data?data.data:[];
          modelData.table.total = data&&data.total?data.total:0;
        }else{
            ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
    .catch(()=>{})
};

watch(
    () => modelData.dialog.dialogFormVisible,
    () => {
      if(!modelData.dialog.dialogFormVisible){
        queryTableData();
      }
    },
    { deep: true, immediate: true }
)

//切换一页显示多少条数据
const handleSizeChange = (val) => {
  modelData.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  modelData.table.pageIndex = val;
  queryTableData();
};
const reset = () => {
    modelData.searchValue = {}
    queryTableData();
}
</script>
<style  lang = 'less' scoped>
.searchBox{
        :deep(.el-input){
            width: 300px;
        }
    }
.totalStyle{
:deep(.el-table--fit){
  height:100%;
}
:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
.bottomBox{
      padding: 16px;
        height: calc(100% - 48px);
    }
.tablestyle {
  position: relative;
  :deep(.el-table__header thead tr) {
    background-color: rgba(64, 158, 255, 0.1);
  }
  :deep(.el-col-3 ){
    max-width: none;
  }
}
:deep(.customer-no-border-table .el-table--border, .el-table--group){
     border: none;
}
.demo-pagination-block {
  margin-top: 16px;
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.buttonFun{
  color: #409eff;
  font-size: 14px;
  margin-right: 8px;
}
.sircle{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  
  display: inline-block;
  margin-bottom: 3px;
  }
  .blue{
    background-color: #409eff;
  }
  .green{
    background-color: #54B831;
  }
  .origin{
    background-color: #FFB929;
  }


}



</style>